<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <title>登录</title>
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}"/>

</head>
<body>

<form name="loginForm" id="loginForm" method="post"  style="width:30%; margin:0 auto;">

    <h2 style="text-align:center; margin-bottom: 20px">用户登录</h2>

    <div class="form-group">
        <div class="row">
            <label class="form-label col-md-4">请输入账号</label>
            <div class="col-md-8">
                <input id="username" name = "username" class="form-control" type="text" placeholder="用户名" required="true"   />
            </div>
            <div class="col-md-1">
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="row">
            <label class="form-label col-md-4">请输入密码</label>
            <div class="col-md-8">
                <input id="password" name="password" class="form-control" type="password"  placeholder="密码" required="true"  />
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="row">
            <div class="col-md-8">
                <input type="checkbox" name="rememberMe" id="rememberMe"/>记住我<br/>
            </div>
        </div>
    </div>

    <div class="row" style="margin-top:40px;">
       <!-- <div class="col-md-6">
            <button class="btn btn-primary btn-block" type="reset" onclick="reset()">重置</button>
        </div>-->
        <div>
            <button class="btn btn-primary btn-block" type="submit" onclick="login()">登录</button>
        </div>
    </div>

</form>
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/jquery-validation/jquery.validate.min.js}"></script>
<script type="text/javascript" th:src="@{/js/md5.min.js}"></script>
<script type="text/javascript" th:src="@{/jquery-validation/localization/messages_zh.min.js}"></script>
<script type="text/javascript" th:src="@{/layer/layer.js}"></script>
<script type="text/javascript" th:src="@{/js/common.js}"></script>
<script type="text/javascript">
    function login() {
        $("#loginForm").validate(
            {
                submitHandler:function (form) {
                    doLogin();
                }
            }
        )
    }
    function doLogin() {
        g_showLoading();
        var inputPass=$("#password").val();
        var salt=g_passsword_salt;
        var str=""+salt.charAt(0)+salt.charAt(2)+inputPass+salt.charAt(5)+salt.charAt(4);
        var password=md5(str);
        var rememberMe=$("#rememberMe").val();
        $.ajax({
            url:"/loginUser",
            type:"POST",
            data:{"username":$("#username").val(),"password":password,"rememberMe":rememberMe},
            success:function (data) {
                /*关闭窗口*/
                layer.closeAll();
                // console.log(data);
                if (data.code=="00000"){
                    layer.msg("成功");
                    window.location.href="/index";
                } else {
                    layer.msg(data.msg);
                }
            },
            error:function () {
                /*关闭窗口*/
                layer.closeAll();
            }

        })
    }
</script>
</body>
</html>
